<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <th:block th:include="/pc/include :: header('公告详情')"/>
    <link th:href="@{/pc/css/details.css}" rel="stylesheet"/>
    <link th:href="@{/pc/css/index.css}" rel="stylesheet"/>
</head>
<body>
<div id="top">
    <div class="top_1">
        <div class="top_1-2">
            <ul>
                <li class="n1">
                    <span th:if="!${session.userInfo}">
                        <a href="/login?isPc=pc">登录</a>
                    </span>
                    <span th:if="${session.userInfo}" style="color: #FB6302">
                        <img th:src="(${#strings.isEmpty(session.userInfo.avatar)}) ? @{/img/profile.jpg} : @{${session.userInfo.avatar}}"
                             class="img-circle"
                             style="width: 25px;height: 25px"
                             alt="User Image">&nbsp;&nbsp;[[${session.userInfo.userName}]]
                    </span>
                </li>
                <li class="n1">
                    <span>
                        <a href="/pc/index">首页</a>
                    </span>
                </li>
                <li class="n1">
                    <span th:if="!${session.userInfo}">
                        <a href="/login?isPc=pc">登录</a>
                    </span>
                </li>
                <li class="n1">
                    <span th:if="${session.userInfo}">
                        <a href="/pc/car">购物车</a>
                    </span>
                </li>
                <li class="n1">
                    <span th:if="${session.userInfo}">
                        <a href="/pc/center">个人中心</a>
                    </span>
                </li>
                <li class="n1">
                    <a th:if="${session.userInfo}" href="/logout">
                        <i class="fa fa-sign-out"></i> 退出登录</a>
                </li>
            </ul>
        </div>
    </div>
</div>
<div style="text-align: center;margin-top: 43px;">
    <h3 style="font-size: 23px;">[[${lsrw.name}]] </h3>
    <div style="float: right;margin-right: 500px;" class="vertical-date">
        时间：<small>[[${#dates.format(lsrw.addTime, 'yyyy-MM-dd HH:mm:ss')}]]</small>
    </div>
</div>
<div id="img-head">
    <div class="cankao">
        <h1 style="font-size: 16px;">内容</h1>
    </div>
    <div style="margin: 0 334px;margin-top: 30px"
         th:if="${lsrw.type == '4'}"
         th:utext="${lsrw.articleUrl}"></div>

    <div style="margin: 0 334px;"
         th:if="${lsrw.type == '2'}">
        <video class="kv-preview-data file-preview-video" controls=""
               style="margin-top: 20px;">
            <source th:src="${lsrw.videoUrl}" type="video/mp4">
            <div class="file-preview-other">
                <span class="file-other-icon"><i class="glyphicon glyphicon-file"></i></span>
            </div>
        </video>
        <div style="margin: 10px 10px;font-size: 16px">
            <h3>摘要</h3>
            [[${lsrw.abstractStr}]]
        </div>
        <div style="height: 20px"></div>
    </div>

    <div style="margin: 0 334px;margin-top: 20px"
         th:if="${lsrw.type == '1'}">
        <audio class="kv-preview-data file-preview-audio" controls="" style="width: 100%; height: 30px;">
            <source th:src="${lsrw.songUrl}" type="audio/mpeg">
            <div class="file-preview-other" style="height: 52px;">
                <span class="file-other-icon"><i class="glyphicon glyphicon-file"></i></span>
            </div>
        </audio>

        <div style="margin: 10px 10px;font-size: 16px">
            <h3>摘要</h3>
            [[${lsrw.abstractStr}]]
        </div>
        <div style="height: 20px"></div>
    </div>

    <div style="margin: 0 334px;"
         th:if="${lsrw.type == '3'}">
        <div style="text-align: center;margin-top: 30px">
            <img th:src="${lsrw.docUrl}" style="width: 900px;">
            <div style="margin: 10px 10px;font-size: 16px;text-align: left">
                <h3>摘要</h3>
                [[${lsrw.abstractStr}]]
            </div>
            <div style="height: 20px"></div>
        </div>
    </div>

</div>


<div>
    <div class="cankao">
        <h1>评论</h1>
    </div>
    <div id="bottom-9">
        <div>
            <form class="form-horizontal m" id="form-menu-add">
                <input id="petId" name="petId" type="hidden" th:value="${lsrw.id}"/>
                <input id="petName" name="petName" type="hidden" th:value="${lsrw.name}"/>
                <div class="form-group">
                    <label class="col-sm-1 control-label" style="font-size: 16px;">评论：</label>
                    <div class="col-sm-10">
                        <textarea name="conent" class="form-control" id="conent" style="min-height: 116px"></textarea>
                    </div>
                </div>
                <button type="button" onclick="addEvaluation()" class="btn btn-w-m btn-primary" style="float: right;">
                    评价
                </button>
            </form>
        </div>
    </div>
</div>

<div style="margin-top: -419px;margin-left: 389px;">
    <div class="vertical-timeline-block" th:each="item:${petEvaluations}" style="width: 1060px;">
        <div class="vertical-timeline-icon navy-bg">
            <i class="fa fa-file-text"></i>
        </div>
        <div class="vertical-timeline-content">
            <h2>[[${item.userName}]]</h2>
            <p>[[${item.conent}]]
            </p>
            <span class="vertical-date">
                    时间：<small>[[${#dates.format(item.addTime, 'yyyy-MM-dd HH:mm:ss')}]]</small>
                </span>
        </div>
    </div>
</div>

<div style="height: 50px;background-color: #F5F5F5;"></div>

<th:block th:include="include :: footer"/>
<script th:inline="javascript">


    var lunbos = document.querySelectorAll("#lunbo li");
    for (var i = 0; i < lunbos.length; i++) {
        lunbos[i].setAttribute("index", i);
        lunbos[i].addEventListener("click", function () {
            var chang = document.getElementById("chang");
            var a = this.getAttribute("index");
            var left = parseFloat(document.defaultView.getComputedStyle(chang, null).left);
            if (a == 0) {
                if (left == -3678) {
                    chang.style.animation = "myfirst2 1s";
                    chang.style.left = 0 + "px";
                } else if (left == -2452) {
                    chang.style.animation = "myfirst1 1s";
                    chang.style.left = 0 + "px";
                } else {
                    chang.style.animation = "myfirst 1s";
                    chang.style.left = 0 + "px";
                }
            }
            if (a == 1) {
                if (left == 0) {
                    chang.style.animation = "myfirst3 1s";
                    chang.style.left = -1226 + "px";
                } else if (left == -2452) {
                    chang.style.animation = "myfirst8 1s";
                    chang.style.left = -1226 + "px";
                } else {
                    chang.style.animation = "myfirst9 1s";
                    chang.style.left = -1226 + "px";
                }
            }
            if (a == 2) {
                if (left == 0) {
                    chang.style.animation = "myfirst4 1s";
                    chang.style.left = -2452 + "px";
                } else if (left == -1226) {
                    chang.style.animation = "myfirst6 1s";
                    chang.style.left = -2452 + "px";
                } else {
                    chang.style.animation = "myfirst11 1s";
                    chang.style.left = -2452 + "px";
                }
            }
            if (a == 3) {
                if (left == 0) {
                    chang.style.animation = "myfirst5 1s";
                    chang.style.left = -3678 + "px";
                } else if (left == -1226) {
                    chang.style.animation = "myfirst7 1s";
                    chang.style.left = -3678 + "px";
                } else {
                    chang.style.animation = "myfirst10 1s";
                    chang.style.left = -3678 + "px";
                }
            }
            var ul = this.parentNode;
            var ls = ul.children;
            for (var i = 0; i < ls.length; i++) {
                ls[i].removeAttribute("class");
            }
            this.className = "active7";
        });
    }

    function addEvaluation() {
        var user = [[${session.userInfo}]];
        if (!user) {
            $.modal.alertError("请登录");
            return;
        }
        var conent = $("#conent").val();
        if (!conent) {
            $.modal.msgError("内容不能为空");
            return
        }
        $.ajax({
            type: "post",
            url: "/system/evaluation/add",
            data: $('#form-menu-add').serialize(),
            success: function (r) {
                layer.alert("评论成功", {
                        icon: 1,
                        title: "系统提示"
                    },
                    function (index) {
                        //关闭弹窗
                        layer.close(index);
                        window.location.reload();
                    });
            }
        });
    }

</script>
</body>

</html>
